<template>
    <div class="userList">
        <!--卡片-->
        <el-card class="box-card">


            <!--定义搜索-->
            <el-form :inline="true" :model="formData" class="demo-form-inline" @submit.native.prevent>
                <el-form-item size="mini">
                    <el-input v-model="formData.nickName" placeholder="请输入昵称" @keyup.enter.native="findUserBySouSuo"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button round type="primary" @click="findUserBySouSuo" size="mini"  icon="el-icon-search" style="margin-left: 10px;margin-right: 10px">搜索</el-button>
                    <el-button round type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="xinzeng">添加</el-button>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" circle @click="handleReset"></el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="headUrl"
                        width="120"
                        label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.headUrl" width="80" height="80"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="nickName"
                        label="备注"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column width="180"
                                 prop="isDeleted"
                                 align="center"
                                 label="状态">
                    <template slot-scope="scope">
                        <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="scope.row.isDeleted"
                                @change="changeStatus(scope.row.id,scope.row.isDeleted)"
                                inactive-color="#13ce66"
                                active-color="#ff4949"
                                active-text="禁用"
                                inactive-text="正常">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column width="190"
                                 prop="gmtCreate"
                                 label="创建时间">
                </el-table-column>
                <el-table-column width="190"
                                 prop="gmtModified"
                                 label="修改时间">
                </el-table-column>
                <el-table-column label="操作" width="303" align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" disabled v-if="scope.row.isDeleted==0" type="danger" @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                        <el-button size="mini" v-else type="danger" @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                        <el-button size="mini" type="success" @click="fenRoleDialog(scope.row.id)">设置角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-divider><i class="el-icon-moon-night"></i></el-divider>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    style="float: right;margin-top: 20px; margin-bottom: 22px"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="allTotal">
            </el-pagination>
    </el-card>



        <!--添加的弹出框表单-->
        <el-dialog :title="tableFormName"
                   @closed="flushAll"
                   width="30%"
                   :visible.sync="dialogFormVisible">
            <el-form :model="form"
                     :rules="addFormRules"
                     ref="formLabel"
                     label-width="70px"
                     @submit.native.prevent
                     class="demo-ruleForm"
                     >

                <el-form-item label="名称:" prop="username">
                    <el-input @keyup.enter.native="addUser"  type="text" v-model="form.username" autocomplete="off" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item label="备注:">
                    <el-input type="textarea" v-model="form.nickName" autocomplete="off" placeholder="请输入角色备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>


        <!--修改用户的对话框-->
        <el-dialog
                title="修改用户"
                :visible.sync="updateUserDialog"
                width="30%"
                @closed="closeUpdateUser"
        >
            <!--表单的数据绑定-->
            <el-form :model="updateUserFormData" @submit.native.prevent :rules="updateUserFormRule" ref="editerRef"  label-width="70px" class="demo-ruleForm">
                <el-form-item label="用户名:" prop="username">
                    <el-input disabled type="text" v-model="updateUserFormData.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注:" >
                    <el-input type="textarea" v-model="updateUserFormData.nickName" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateUserDialog = false">取 消</el-button>
                <el-button type="primary" @click="updateUser">确 定</el-button>
            </span>
        </el-dialog>

        <!--修改权限的窗口-->
        <el-dialog
                width="60%"
                title="修改权限"
                :visible.sync="visible"
                @closed="closeRoleSou"
                >
            <div class="pad20">
                <div>
                    <el-form :inline="true" size="mini" @submit.native.prevent>
                        <el-form-item label="角色：">
                            <el-input v-model="roleFormData.roleName" @keyup.enter.native="findRole"></el-input>
                        </el-form-item>
                        <el-form-item>
<!--                            <el-button type="primary" :loading="ctrl.load">查询</el-button>-->
                            <el-button type="primary" @click="findRole">查询</el-button>
                            <el-button class="filter-item" @click="restRole">重置</el-button>
                            <el-button type="success"  size="mini" @click="confirmFenRole">确定角色</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--权限表格-->
                <div>
                    <el-table
                            :data="roles"
                            border
                            ref="multipleTable"
                            :row-key="getRowKeys"
                            :reserve-selection="true"
                            @selection-change="handleSelectionChange"
                            style="width: 100%">
                        <el-table-column
                                prop="roleName"
                                label="角色名称"
                                align="center"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="remark"
                                label="备注"
                                align="center"
                                >
                        </el-table-column>
                        <el-table-column
                                         prop="isDeleted"
                                         align="center"
                                         label="状态">
                            <template slot-scope="scope">
                                    <span v-html="scope.row.isDeleted===0?'启用':'禁用'"></span>
                            </template>
                        </el-table-column>
                        <el-table-column  align="center" width="60" :reserve-selection="true" type="selection" prop="id" :selectable='selectInit'></el-table-column>
                    </el-table>
                    <el-divider><i class="el-icon-loading"></i></el-divider>

                    <el-pagination
                            background
                            style="float: right;"
                            @size-change="handleSizeChange2"
                            @current-change="handleCurrentChange2"
                            :current-page="roleCurrentPage"
                            :page-size="rolePageSize"
                            :page-sizes="[5, 10, 15]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="roleAllTotal">
                    </el-pagination>
                </div>
                <br/>
                <br/>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "UserList",
        created() {
            this.initTable();
        },
        data(){
            return {

                //控制权限的弹框显示
                visible:false,

                checkAll: false,    //全选
                checkedRoles: [],   //用户具有的权限
                roles: [],          //查询具有的所有权限
                allRoles:[],
                userId:"",          //用户id
                isIndeterminate: true,

                roleFormData:{  //权限搜索框的内容
                    roleName:"",
                },

                //当前页面--》page
                roleCurrentPage:1,
                //每页几条--》limit
                rolePageSize:5,
                //总条数
                roleAllTotal:0,


                idlist:[],

                //新增用户的表单元素判断
                addFormRules:{
                    username:[
                        {required:true,message:'用户名不能为空'},
                        {min:2,max:10,message:"账号的长度[2~10]",trigger:"blur"},
                    ],
                },

                //控制修改框的是否显示
                updateUserDialog:false,
                //修改用户的表单数据
                updateUserFormData:{},
                //修改的表单校验规则
                updateUserFormRule:{

                },

                //当前页面--》page
                currentPage:1,
                //每页几条--》limit
                pageSize:2,
                //总条数
                allTotal:0,
                tableFormName:'',
                tableData: [],
                formData:{
                    username:"",
                    startDate:'',
                    endDate:'',
                },

                //控制添加弹出对话框是否显示
                dialogFormVisible: false,
                //添加按钮弹出层表单数据
                form: {
                    username:'',
                    nickName:'',
                    password:'',
                },

                checkedrow:[],
                startDate: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },


                endDate: {
                    disabledDate :(time)=> {
                        if (this.formData.startDate!='')
                            return time.getTime() < new Date(this.formData.startDate).getTime() || time.getTime() > Date.now();
                    },
                },

            }

        },
        methods:{
            getRowKeys(row) {
                return row.id;
            },

            //确认分配角色
            confirmFenRole(){
                const idlist = [];
                this.checkedRoles.map(item => { // 遍历获取已选中的角色id
                    idlist.push(item.id)
                })
                var that=this;
                this.$http.post("/system/role/confirm?userId="+this.userId+"&roleIds="+idlist).then(function(resp){
                    if (resp.data.code==200){
                        that.$message.success(resp.data.message);
                    }else {
                        that.$message.error(resp.data.message);
                    }
                    that.visible=false;
                });
            },

            // 选择添加的角色
            handleSelectionChange(val) {
                this.checkedRoles=val;

            },

            selectInit(row,index){
//在这里一定要记得类型匹配的上。我就是入了一个小坑，就是类型判断不一定，导致浪费了好久。eg:'false'==false是不相等的，我就栽在了这个上面。可能因为我是小菜鸟吧。在此写一下，希望看到我的文章的朋友们可以避免这个问题。
                if(row.isDeleted===1){
                    return false  //不可勾选
                }else{
                    return true  //可勾选
                }
            },

            //8888
            //点击设置角色按钮,加载所有角色及用户具有的角色
            fenRoleDialog(userId){
                this.visible=true;
                this.userId=userId;
                var that=this;
                this.$http.get( `/system/role/getByUserId/${userId}`).then(function(resp){
                    if (resp.data.code==200){
                        that.allRoles=resp.data.data.all;
                        that.checkedRoles=resp.data.data.roles;
                        that.findRole();//分页查询
                        that.setSelect();//数据回显
                    }
                });

            },


            //用于权限的会回显设置
            setSelect() {
                    this.allRoles.map(item=>{
                        if (this.checkedRoles.indexOf(item.id)!==-1){
                            this.$nextTick(() => {
                                this.$refs.multipleTable.toggleRowSelection(item) // 回显
                            })

                        }
                    })
            },


            //关闭设置角色页面时，清空数据
            closeRoleSou(){
              this.roleFormData.roleName="";
              this.checkedRoles=[];
              this.rolePageSize=5;//每页几条--》limit
              this.roleCurrentPage=1;//当前页面--》page
              this.$refs.multipleTable.clearSelection();
            },

            //点击重置按钮时，
            restRole(){
                this.rolePageSize=5;//每页几条--》limit
                this.roleCurrentPage=1;//当前页面--》page
                this.findRole();
            },

            /*根据id删除用户
               * index:表格中的序号。。0开始
               * id:用户id
               * */
            handleDelete(index,id){
                this.$confirm(`确定要《《彻底删除》》该用户吗?`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that=this;
                    console.log();
                    this.$http.delete(`/system/user/deleteUserById/${id}`).then(function (resp) {
                        if (resp.data.code==200){
                            that.$message.success(resp.data.message);
                            that.initTable();
                        }else {
                            that.$message.error(resp.data.message);
                        }
                    })
                    this.reload()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '删除已取消'
                    });
                })

            },

            //修改用户信息
            handleEdit(index,row){
                this.updateUserFormData=row;//将当前行的数据放入
                this.updateUserDialog=true;//开启弹出框
            },
            //新增
            xinzeng(){
                this.tableFormName="新增用户";
                this.dialogFormVisible=true;
                this.form={};
            },

            //添加用户信息
            addUser(){
                var that=this;
                this.$refs.formLabel.validate((valid) => {//判断表单内是否有标红的地方
                    if (valid) {
                        this.$http.post("/system/user/addUserByUser", this.form).then(function (resp) {
                            if (resp.data.code == 200) {
                                that.$message.success(resp.data.message);
                                that.initTable();
                                that.dialogFormVisible = false;//设置成功后关闭弹出框
                                that.flushAll();
                            } else {
                                that.$message.error(resp.data.msg);
                                that.flushAll();
                                that.form={};
                            }
                        })
                    }else {
                        that.$message.error("添加有误");
                    }
                })
            },
            //修改用户信息
            updateUser(){
                var that=this;
                this.$refs.editerRef.validate((valid) => {//判断表单内是否有标红的地方
                    if (valid) {
                        this.$http.post("/system/user/updateUserByUser", this.updateUserFormData).then(function (resp) {
                            if (resp.data.code == 200) {
                                that.$message.success(resp.data.message);
                                that.initTable();
                            } else {
                                that.$message.error(resp.data.message);

                            }
                            that.updateUserDialog = false;
                        })
                    }else {
                        that.$message.error("修改有误");
                    }
                })
            },


            //加载表格数据
            initTable(){
                var that=this;
                this.$http.post("/system/user/list/"+this.currentPage+"/"+this.pageSize,this.formData).then(function (resp) {
                    that.tableData=resp.data.data.records;
                    that.allTotal=resp.data.data.total;
                    that.formData={};
                })
            },

            //关闭时清空表单
            flushAll(){
                this.$refs.formLabel.resetFields();
            },
            // 重置查询条件
            handleReset() {
                this.reload()
            },
            // 刷新当前页面
            reload() {
                this.formData = {}
                this.initTable()
            },
            //关闭时清空表单
            closeUpdateUser(){
                this.$refs.editerRef.resetFields();
                this.initTable();
            },

            //搜索按钮
            findUserBySouSuo(){
                    this.initTable();
            },

            //权限弹出框中搜索按钮
            findRole(){
                var that=this;
                this.$http.post( `/system/role/list/${this.roleCurrentPage}/${this.rolePageSize}`,this.roleFormData).then(function(resp){
                    that.roles=resp.data.data.records;
                    that.roleAllTotal=resp.data.data.total;
                    that.setSelect();
                    that.roleFormData.roleName="";

                });
            },

            //分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            //分页按钮被点击，发生改变时
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },

            //角色弹框的分页
            handleSizeChange2(val) {
                this.rolePageSize=val;
                this.findRole();
            },
            //角色弹框分页按钮被点击，发生改变时
            handleCurrentChange2(val) {
                this.roleCurrentPage=val;
                this.findRole();
            },

            //根据传入的id与转态修改用户状态
            changeStatus(id,deleted){
                const title = { 0: '启用', 1: '禁用' }
                this.$confirm(`确定要《《${title[deleted]}》》该用户吗?`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that=this;
                    this.$http.post("/system/user/status?id="+id+"&status="+deleted).then(function (resp) {
                        if (resp.data.code==200){
                            that.$message.success(resp.data.message);
                            that.initTable();
                        }else {
                            that.$message.error(resp.data.message);
                            that.initTable();
                        }
                    })
                    this.reload()
                }).catch(() => {
                    this.reload()
                })
            }
        }

    }
</script>

<style >
    #maxdd{
        background-color: rgba(255, 255, 255, 0.5)
    }
    /*解决elementUI中表格格子不对齐的问题*/
    .el-table th.gutter{
        display: table-cell!important;
    }

    .el-form-item__content{
        line-height: 0px;
        position: relative;
        font-size: 14px;
    }




</style>